<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>数据绑定</title>
</head>

<body>
    <!--    
        vue中有两种数据绑定
            单向数据绑定（v-bind） 数据只能从data流向页面
            双向数据绑定（v-model） 数据可以从data流向页面  也可以从页面流向data

            备注：
            1.双向绑定一般应用与表单元素上（如input、select等）    
            2.v-model：value 可以简写为v-model。因为v-model默认收集的就是value值
     -->
    <div id="root">
        <h1>数据绑定</h1>
        单项数据绑定<input type="text" v-bind:value="value">
        <br/> 双向数据绑定
        <input type="text" v-model:value="value">

        <!-- 这样写是有问题的  v-model只能应用于表单元素（输入类元素） -->
        <h1 v-model:x="value">你好呀</h1>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                value: '数据绑定'
            }
        })
    </script>
</body>

</html>